<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="func.js"></script>
  <title>图片预览</title>
  <style>
  div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #0006;
  }

  div img {
    position: absolute;
    height: 100%;
    width: auto;
    cursor: grab;
  }

  div img:active {
    cursor: grabbing;
  }

  * {
    transition-duration: 0.2s;
    transition-property: transform;
  }
  </style>
</head>

<body>
  <div id="div" onmousewheel="return bbimg(this)"></div>
  <script language="javascript">
  const getuserdatapath = () => {
    if (process.platform != 'linux') return require('path').join(process.env.appdata, 'cmp').replaceAll('\\', '/')
  }

  // Linux detection
  if (process.platform === 'linux') {
    // Hey, you are using the linux system!
    getuserdatapath = () => {
      return process.cwd() + '/ldata'
    }
  }
  // Windows 10 detection
  if (isWin10()) {
    add_css(`body{ background-color:#000 }`)
  }
  var params = {
    zoomVal: 1,
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
  };
  let panelistic;
  const electron = require("electron");
  let imgData = fs.readFileSync(getuserdatapath() + "/userfile/tempimg")
  document.getElementById('div').innerHTML = `<img id="img" style="display:block;vertical-align: middle;" onerror="if(this.src!=''){this.src='src/img/warn.png';this.style.cursor='not-allowed';}" ondragstart="return false" src="${imgData}">`
  window.onload = function() {}
  //图片缩放
  function bbimg(o) {
    var o = o.getElementsByTagName("img")[0];
    params.zoomVal += event.wheelDelta / 800;
    if (params.zoomVal >= 0.2) {
      o.style.transform = "scale(" + params.zoomVal + ")";
    } else {
      params.zoomVal = 0.2;
      o.style.transform = "scale(" + params.zoomVal + ")";
      return false;
    }
  }
  //获取相关CSS属性
  var getCss = function(o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
  };
  //拖拽的实现
  var startDrag = function(bar, target, callback) {
    if (getCss(target, "left") !== "auto") {
      params.left = getCss(target, "left");
    }
    if (getCss(target, "top") !== "auto") {
      params.top = getCss(target, "top");
    }
    //o是移动对象
    bar.onmousedown = function(event) {
      params.flag = true;
      if (!event) {
        event = window.event;
        //防止IE文字选中
        bar.onselectstart = function() {
          return false;
        }
      }
      var e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };
    document.onmouseup = function() {
      params.flag = false;
      if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
      }
      if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
      }
    };
    document.onmousemove = function(event) {
      var e = event ? event : window.event;
      if (params.flag) {
        var nowX = e.clientX,
          nowY = e.clientY;
        var disX = nowX - params.currentX,
          disY = nowY - params.currentY;
        target.style.left = parseInt(params.left) + disX + "px";
        target.style.top = parseInt(params.top) + disY + "px";
        if (typeof callback == "function") {
          callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
        }
        if (event.preventDefault) {
          event.preventDefault();
        }
        return false;
      }
    }
  };
  startDrag(document.getElementById("img"), document.getElementById("img"))
  </script>
</body>

</html>